import { FC, useEffect, useRef, useState } from "react";
import { IconFont } from "../../../utils/iconfont/icon";
import styles from "./process-bar.module.css";
import { Button, Radio, Spin, Skeleton, Statistic } from "antd";
import { useDispatch } from "react-redux";
import { BrowserRouter, Route, Switch, useHistory } from "react-router-dom";
import { Tabs } from "antd";
// import { Input } from "antd";
// import { SearchOutlined } from "@ant-design/icons";
import { useSelector } from "../../../redux/hooks";
import { getPlaylist, getUserDetail } from "../../../redux/userInfo/slice";
import { getsongList, getMvUrl } from "../../../redux/list/slice";
import {
  CaretRightOutlined,
  DownloadOutlined,
  FolderAddOutlined,
  ShareAltOutlined,
} from "@ant-design/icons";
import { playerSlice } from "../../../redux/player/slice";
import dayjs from "dayjs";
import mayixuejie from "../../../assest/mayixuejie.jpg";

const Progress = (props: any) => {
  const { url } = props;

  return (
    <div>
      <div className={styles.audioBox}>
        <audio
          style={{ width: 650 }}
          src={url}
          controls={true}
          autoPlay={true}
        ></audio>
        <div className={styles.shangyishou}>
          <IconFont type="icon-shangyishou1" />
        </div>
        <div className={styles.shangyishou}>
          <IconFont type="icon-xiayishou" />
        </div>
      </div>
    </div>
  );
};

export default Progress;
